<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-08-20 09:58:56
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-08-22 18:49:28
 * @FilePath: /XMate-h5/src/views/customer/customerDetail/components/opportunityList/h5/index.vue
 * @Description: h5
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->

<template>
  <div class="h5-opportunity-list">
    <businessOpportList
      v-if="list.length"
      :list="list"
      :loading="loading"
      :refreshing="refreshing"
      :pagination="pagination"
      @page-change="handlePageChange"
      @refresh="handleRefresh"
    />

    <!-- 空状态 -->
    <div class="empty-state" v-if="!loading && list.length === 0">
      <el-empty description="暂无商机数据" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import businessOpportList from "@/components/businessOpportListView/index.vue";

// Props定义
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  refreshing: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Object,
    default: () => ({
      pageNumber: 1,
      pageSize: 10,
      total: 0,
    }),
  },
});

// Emits定义
const emit = defineEmits(["page-change", "refresh"]);

// 分页事件处理
const handleSizeChange = (size) => {
  emit("page-change", 1, size);
};

const handleCurrentChange = (page) => {
  emit("page-change", page);
};

const handlePageChange = (page, size) => {
  emit("page-change", page, size);
};

const handleRefresh = () => {
  emit("refresh");
};
</script>

<style scoped>
.h5-opportunity-list {
  width: 100%;
  background: white;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid #f0f2f5;
  margin-top: 12px;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

:deep(.el-pagination.is-small) {
  --el-pagination-font-size: 12px;
}

:deep(.el-pagination.is-small .el-pager li) {
  min-width: 28px;
  height: 28px;
  line-height: 28px;
}
</style>
